.gka-wrap {
    width: 50px;
    height: 50px;
}

.animation {
    width: 50px;
    height: 50px;
    background-image: url("./img/gkatest_1.png");
    background-size: 50px 50px;
    background-repeat: no-repeat;
    animation-name: keyframes-name;
    animation-duration: 0.32s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-timing-function: steps(1);
}

@keyframes keyframes-name {
    0% {
        width: 50px;
        height: 50px;
        background-image: url("./img/gkatest_1.png");
        background-size: 50px 50px;
    }
    12.50% {
        background-image: url("./img/gkatest_2.png");
    }
    25.00% {
        background-image: url("./img/gkatest_3.png");
    }
    37.50% {
        background-image: url("./img/gkatest_4.png");
    }
    50.00% {
        background-image: url("./img/gkatest_5.png");
    }
    62.50% {
        background-image: url("./img/gkatest_6.png");
    }
    75.00% {
        background-image: url("./img/gkatest_7.png");
    }
    87.50%,
    100% {
        background-image: url("./img/gkatest_8.png");
    }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .gka-wrap {
        width: 25px;
        height: 25px;
    }
    .animation {
        width: 25px;
        height: 25px;
        background-image: url("./img/2x/gkatest_1.png");
        background-size: 25px 25px;
        background-repeat: no-repeat;
        animation-name: keyframes-name;
        animation-duration: 0.32s;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
        animation-timing-function: steps(1);
    }
    @keyframes keyframes-name {
        0% {
            width: 25px;
            height: 25px;
            background-image: url("./img/2x/gkatest_1.png");
            background-size: 25px 25px;
        }
        12.50% {
            background-image: url("./img/2x/gkatest_2.png");
        }
        25.00% {
            background-image: url("./img/2x/gkatest_3.png");
        }
        37.50% {
            background-image: url("./img/2x/gkatest_4.png");
        }
        50.00% {
            background-image: url("./img/2x/gkatest_5.png");
        }
        62.50% {
            background-image: url("./img/2x/gkatest_6.png");
        }
        75.00% {
            background-image: url("./img/2x/gkatest_7.png");
        }
        87.50%,
        100% {
            background-image: url("./img/2x/gkatest_8.png");
        }
    }
}